<template>
    <div class="layer_page">
        <SideBar></SideBar>
        <div class="main">
            <Header></Header>
            <div class="router_view_area">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();

// 计算当前路由的标题
const currentRouteTitle = computed(() => {
    return route.meta.title || '默认标题'; // 如果没有设置标题，则显示默认标题
});
</script>
<style lang="scss" scoped>
.layer_page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .main {
        height: 100%;
        margin-left: 200px;
        position: relative;
        .router_view_area {
            padding: 10px;
            height: calc(100% - 50px);
            overflow-x: hidden;
            overflow-y: scroll;
        }
    }
}
@media screen and (max-width: 991px) {
    .layer_page {
        .main {
            margin-left: 65px;
        }
    }
}
</style>

